<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no" name="format-detection">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1;user-scalable=no;">
    <title>1起购</title>
    <link rel="stylesheet" href="/statics/view/css/bootstrap.css">
    <link rel="stylesheet" href="/statics/view/css/style.css">
    <link rel="stylesheet" href="/statics/view/css/member.css">
    <link rel="stylesheet" href="/statics/view/css/order3.css">
    <script type="text/javascript" src="/statics/layer.m/layer.m.js"></script>
    <script charset="utf-8" src="/statics/view/js/TouchSlide.js"></script>
    <script charset="utf-8" src="/statics/view/js/jquery.min.js"></script>
    <script charset="utf-8" src="/statics/view/js/global.js"></script>
    <script charset="utf-8" src="/statics/view/js/bootstrap.min.js"></script>
    <script charset="utf-8" src="/statics/view/js/template.js"></script>
    <script charset="utf-8" src="/statics/view/js/stickTop.js"></script>
    <style type="text/css">
        .details_con li .tb-out-of-stock {
            border: 1px dashed #bbb;
            color: #bbb;
            cursor: not-allowed;
        }

        .no-selected {
            background: #ffe8e8 none repeat scroll 0 0;
            border: 2px solid #be0106;
            margin: -1px;
        }

        meter {
            display: block;
            width: 100%;
        }

        meter::-webkit-meter-optimum-value {
            background: linear-gradient(to bottom, #EAA1B1, #EAA1B1);
        }
    </style>
<body>

<div class="fanhui_cou">
    <div class="fanhui_1"></div>
    <div class="fanhui_ding">顶部</div>
</div>

<header class="header">
    <div class="fix_nav">
        <div style="max-width:768px;margin:0 auto;background:#db3652;position: relative;">
            <a class="nav-left back-icon" href="javascript:history.back();">返回</a>
            <div class="tit">${dbProduct.name}</div>
            <a class="nav-right icon-home" href="/dbs/index.html">首页</a>
        </div>
    </div>
</header>
<div class="container">
    <div class="row white-bg">
        <div id="slide">
            <div class="hd">
                <ul>
                    <li>1</li>
                </ul>
            </div>
            <div class="bd">
                <div class="tempWrap" style="overflow:hidden; position:relative;">
                    <ul style="width: 3072px; position: relative; overflow: hidden; padding: 0px; margin: 0px; transition-duration: 200ms; transform: translateX(-768px);">

                    [#list dbProduct.productImages as productImage]
                        <li style="display: table-cell; vertical-align: middle; max-width: 768px;">
                            <a href="#"> <img width="100%" src="${productImage.large}" class=""></a>
                        </li>

                    [/#list]
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row gary-bg">
        <div class="white-bg p10 details_con">
            <h1 class="item-name" id="prodName">${dbProduct.name}</h1>
            <ul>
                <li>
                    <label>当前期号：</label>
                    <span class="price">${dbTimes.timesNo}</span>
                </li>
                <li>
                    <div class="progress" data-sum="${dbTimes.quantity}">
                   <span class="progress-bar progress-bar-warning" style="width: ${(dbTimes.currentQuantity*100/dbTimes.quantity)?string("0.##")}%;">
                   </span>
                    </div>
                </li>
                <li>

                    <div class="mem_sh_bot">
                        <div class="mem_sh_bot_lef fl set_default">

                            <label class="mem_sh_bot_lef_tit fl">总需${dbTimes.quantity}人次</label>
                        </div>

                        <div class="mem_sh_bot_rig fr">

                            <label class="member_right_r fr">剩余${dbTimes.quantity-dbTimes.currentQuantity}人次</label>
                        </div>

                    </div>

                </li>
            [#-- 当期中奖信息--]
            [#if dbTimes.isLottery]
                <li>
                    <div class="panel panel-success">

                        <div class="alert alert-info gary">
                            <p>获奖者：<span class="red">${dbTimes.dbOrder.mobileInfo}</span></p>

                            <p id="lotteryShow">
                            </p>

                            <p>揭晓时间：${dbTimes.endDate?string("yyyy-MM-dd HH:mm:ss")}</p>

                        </div>
                        <div class="red panel-heading text-center">
                            <div class="panel-title "><span class="right"> 幸运号码：<b>${dbTimes.timesCode}</b><span><a class="btn btn-danger" href="/db/calc-${dbProduct.id}-${dbTimes.timesNo}">查看计算规则 </a></div>
                        </div>
                    </div>
                </li>
            [/#if]
            </ul>
            <li>
                <div class="alert alert-info gary" id="mem-orders" style="display: none;">

                </div>
                <div class="alert alert-info" id="mem-data-none" style="display: none;">
                    <div class="tac">您尚未参加本期抢购~</div>
                </div>
                <div class="alert alert-info" id="mem-data-login" style="display: none;">
                    <div class="tac "><p><a
                            href="/login?redirectUrl=/dbs/product-${dbProduct.id}-${dbTimes.timesNo}.html"><b>请登录</b></a>，查看你的抢购号码！
                    </p></div>
                </div>


            </li>


        </div>
        <div id="goodsContent" class="goods-content white-bg">

            <div class="list-group mb10">
                <a href="/db/product-detail-${dbProduct.id}" class="list-group-item tip">
                    <div class="list_group_img"><img src="/statics/view/images/order_bg_2.png"></div>
                   该商品由&nbsp; <span class="title red">1元购平台</span>&nbsp;提供
                </a>
                <a href="/db/product-detail-${dbProduct.id}" class="list-group-item tip">
                    <div class="list_group_img"><img src="/statics/view/images/order_bg_10.png"></div>
                    图文详情（建议在wifi下查看）
                </a>
                <a href="/db/product-allRecord-${dbProduct.id}" class="list-group-item tip">
                    <div class="list_group_img"><img src="/statics/view/images/order_bg_9.png"></div>
                    往期揭晓
                </a>
                <a href="/db/shareRecord-${dbProduct.id}" class="list-group-item tip">
                    <div class="list_group_img"><img src="/statics/view/images/order_bg_5.png"></div>
                    晒单分享
                </a>
            </div>
        </div>
        <div class="list-group mb10">
            <div class="list-group-item">
                <div class="list_group_img"></div>
                所有参与记录
            </div>
            <ul>
                <li id="orderList">

                </li>
            </ul>


        </div>

    </div>
</div>

<div class="fixed-foot">
    <div class="fixed_inner">
[#if !dbTimes.isOver]
        <a class="cart-wrap" href="">

            <span>&nbsp;</span>
        </a>

        <div class="buy-btn-fix">
            <a class="btn btn-danger btn-buy"
               href="/db/cart/list?tNo=${dbTimes.timesNo}&pid=${dbProduct.id}&num=${dbTimes.stepNum}">立即参与</a>
        </div>
[#else]
        <div class="pay-point">

            <p class="red f22">最新一期正在火热进行...</p>
        </div>

        <div class="buy-btn-fix">
            <a class="btn btn-danger btn-buy" href="/dbs/index.html">立即前往</a>
        </div>
[/#if]
    </div>
</div>

<div class="clear"></div>
<footer class="footer">

</footer>

<script type="text/javascript">


    //插件：图片轮播
    TouchSlide({
        slideCell: "#slide",
        titCell: ".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        mainCell: ".bd ul",
        effect: "left",
        autoPlay: false,//自动播放
        autoPage: true, //自动分页
        switchLoad: "_src" //切换加载，真实图片路径为"_src"
    });


</script>
<script type="text/javascript">
    $(function () {
        $("#showLotteryCode").click(function () {
            var data = $(this).attr("data-content");
            layer.alert(data)
        });

        // resize bootstrap modal center
        $(window).on('resize', centerModals);
    });
    //    $(function(){
    //        $("#showMy_Code").click(function(){
    //            var data=$(this).attr("data-content");
    //            layer.alert(data)
    //        });
    //    });

</script>
<script type="text/javascript">

    function loadLottery(){
        $.ajax({
            url: "/db/times-lottery",
            type: "GET",
            data: {
                timesNo: "${dbTimes.timesNo}"
            },
            dataType: "json",
            cache: false,
            success: function (data) {
                    if (data.lotteryCode.length > 0) {
                        var codeInfoArr = [];
                        $(data.lotteryCode).each(function (index, element) {
                            var o = data.lotteryCode[index];
                            var li = "<li>" + o.dbCode + "</li>";

                            $(".w-msgbox-codes ul").append(li);

                            codeInfoArr.push(o.dbCode);
                        });
                        // 加载全部夺宝号
                        $(".w-msgbox-codes .f-txtabb").html("${dbProduct.name}");
                        $(".w-msgbox-codes .txt-red").html(data.lotteryCode.length);

                        var LotteryOrdersHtml = '<span>用户参与了：'+ data.lotteryCode.length +'人次<a id="showLotteryCode" onclick="showLotteryAllCode()"  href="javascript:void(0)" style="color:#0044cc">'+
                        '&nbsp;&nbsp;查看ta的抢购号码</a></span>';
                        $(LotteryOrdersHtml).appendTo("#lotteryShow");
                    }

            }, error: function () {
            }
        });
    }
    function loadCQ() {
        $.ajax({
            url: "/db/times-cq",
            type: "GET",
            data: {
                q: "${dbTimes.id}"
            },
            dataType: "json",
            cache: false,
            success: function (data) {
                var $dom = $(".progress");
                var $domes = $(".mem_sh_bot");

                var dataSum = $dom.attr("data-sum");
            [#if dbTimes.isLottery]
                var current = dataSum;[#else]var current = data.content;
            [/#if]
                var progressData = ((current*100) / dataSum).toFixed(2);
                $dom.find(".progress-bar").css("width",progressData+"%");
                $domes.find(".member_right_r").html("剩余"+(dataSum - current)+"人次");
            }, error: function () {
            }
        });
    }

    function loadOrder() {
        $.ajax({
            url: "/db/times-data",
            type: "GET",
            data: {
                timesNo: "${dbTimes.timesNo}"
            },
            dataType: "json",
            cache: false,
            success: function (data) {
                $(data.order).each(function (index, element) {
                    var o = data.order[index];
                    var html = ' <div class="help_content" style="font-size:12px;color:#666;padding-top: 5px;width: 100%;">' +

                            '<p ><a href="" style="color: #0079fe;">' + o.mobileInfo + '</a></p>' +
                            ' <p><span class="num">参与了<span class="red">' + o.quantity + '</span>人次</span>' + o.dateInfo + '</p>' +
                            '</div>';
                    $(html).appendTo("#orderList");
                });
                if (data.myCode == null) {
                    $("#mem-data-login").css("display", "block");
                } else {
                    if (data.myCode.length > 0) {
                            var codeInfoArr = [];
                            $(data.myCode).each(function (index, element) {
                                var o = data.myCode[index];
                                var li = "<li>" + o.dbCode + "</li>";

                                $(".w-msgbox-codes ul").append(li);

                                codeInfoArr.push(o.dbCode);
                            });
                            // 加载全部夺宝号
                            $(".w-msgbox-codes .f-txtabb").html("${dbProduct.name}");
                            $(".w-msgbox-codes .txt-red").html(data.myCode.length);


                            var myOrdersHtml = ' <p>您参与了：<span class="red">' + data.myCode.length + '</span>人次</p>' +
                                    '<p class="codes" style="padding-left: 20px;">夺宝号码：' + codeInfoArr.slice(0, 5).join("　") + (data.myCode.length > 5 ? '<a id="show_myCode" href="javascript:void(0)" onclick="showAllCode()" style="color:#0044cc">　查看全部</a></p>' : '');
                            $(myOrdersHtml).appendTo("#mem-orders");


                        $("#mem-orders").css("display","block");
                    } else {
                        $("#mem-data-none").css("display", "block");
                    }
                }
            }, error: function () {
            }
        });
    }
    loadCQ();
    loadOrder();
    loadLottery();

    function showAllCode(){
        $("#myModal").modal();
    }
    function showLotteryAllCode(){
        $("#lotteryModal").modal();
    }
</script>


<!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">

                    </h4>
                </div>
                <div class="modal-body w-msgbox-codes">
                    <div class="name">
                        <h3 class="f-txtabb"></h3>
                        <span><b class="txt-red"></b>人次</span>
                    </div>
                    <p>以下是你的所有夺宝号码：</p>
                    <ul></ul>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="lotteryModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">

                        </h4>
                    </div>
                    <div class="modal-body w-msgbox-codes">
                        <div class="name">
                            <h3 class="f-txtabb"></h3>
                            <span><b class="txt-red"></b>人次</span>
                        </div>
                        <p>该用户所有夺宝号码：</p>
                        <ul></ul>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
</body>
</html>
